<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="Wikis" name="first">
        <el-table :data="list" border fit highlight-current-row>
          <el-table-column type="index">
          </el-table-column>
          <el-table-column label="Title">
            <template slot-scope="{ row }">
              <span class="link-type">
                <a target="_blank" :href="row.link">{{ row.title }}</a>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="Detail">
            <template slot-scope="{ row }">
              <span class="link-type">
                <a target="_blank" :href="row.link">{{ row.title }}</a>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="Portals" name="second">
        <el-table :data="portal" border fit highlight-current-row>
          <el-table-column type="index">
          </el-table-column>
          <el-table-column label="Title">
            <template slot-scope="{ row }">
              <span class="link-type">
                <a target="_blank" :href="row.link">{{ row.title }}</a>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="Detail">
            <template slot-scope="{ row }">
              <span class="link-type">
                <a target="_blank" :href="row.link">{{ row.title }}</a>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="常用视频" name="third">
        <el-table :data="video" border fit highlight-current-row>
          <el-table-column type="index">
          </el-table-column>
          <el-table-column label="Title">
            <template slot-scope="{ row }">
              <span class="link-type">
                <a target="_blank" :href="row.link">{{ row.title }}</a>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="Videos">
            <template slot-scope="{ row }">
              <span class="link-type" style="display: block;" v-for="(v,i) in row.details" :key="i">
                <a target="_blank" :href="v.link">{{ v.title }}</a>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'third',
      list: [
        {
          title: '云平台Wiki',
          link: 'http://3ms.huawei.com/hi/group/1005981/wikis.html',
          details: {
            title: ''
          }
        }
      ],
      portal: [
        {
          title: '云眼',
          link: 'https://opene2-drcn.platform.hicloud.com/',
          details: {
            title: ''
          }
        }
      ],
      video: [
        {
          title: '云云对接',
          link: 'https://git.huawei.com/CCSBC/carcloud/issues/48',
          details: [
            {
              title: '与小康云云对接交流纪要',
              link: 'https://git.huawei.com/CCSBC/carcloud/issues/106#note_2716838'
            },
            {
              title: '云云对接需求串讲',
              link: 'https://git.huawei.com/CCSBC/carcloud/issues/106#note_2847332'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>
